﻿<template>
    <div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="项目日志记录" name="first">
                <el-table :data="JournaltableData" style="width: 100%;margin-top:10px">
                    <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column align="center" label="日期" prop="JournalDate">
                        <template slot-scope="slot">
                            {{ fmtDate(slot.row.JournalDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="班组" prop="Team"></el-table-column>
                    <el-table-column align="center" label="天气状况" prop="Weather"> </el-table-column>
                    <el-table-column align="center" label="风力" prop="WindPower"> </el-table-column>
                    <el-table-column align="center" label="最高温度" prop="MaxTemperature"> </el-table-column>
                    <el-table-column align="center" label="最低温度" prop="MinTemperature"> </el-table-column>
                    <el-table-column align="center" label="施工情况" show-overflow-tooltip prop="ConstructionCondition"> </el-table-column>
                    <el-table-column align="center" label="材料情况" show-overflow-tooltip prop="MaterialInformation"> </el-table-column>
                    <el-table-column align="center" label="工作情况" show-overflow-tooltip prop="WorkRecord"> </el-table-column>
                    <el-table-column align="center" label="操作" width="150" prop="WorkRecord">
                        <template slot-scope="scope">
                            <el-button type="success" size="mini" @click="TableProjectEvent(scope.row)">修改</el-button>
                            <el-button type="danger" size="mini" plain @click="BatchDeleteOne_event(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align:center;margin-top:2%">
                    <el-button type="success" @click="ShowAddProjectJournalPage">新增日志</el-button> 
                </div>
            </el-tab-pane> 

            <el-tab-pane label="项目支出明细" name="second">
                <el-table :data="ExpensetableData" style="width: 100%;margin-top: 10px">
                    <el-table-column fixed type="index" label="序号" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column prop="CategoryOne" label="类别一" align="center">
                        <template slot-scope="slot">
                            {{ FinanceCategoryName(slot.row.CategoryOne) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="CategoryTwo" label="类别二" align="center">
                        <template slot-scope="slot">
                            {{ FinanceCategoryName(slot.row.CategoryTwo) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="ChargeUserId" label="经办人" align="center">
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.ChargeUserId) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="PayPeople" label="付款对象" align="center"></el-table-column>
                    <el-table-column prop="PayDate" label="付款时间" align="center">
                        <template slot-scope="slot">
                            {{ fmtDate(slot.row.PayDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="PayMethod" label="支付方式" align="center">
                        <template slot-scope="slot">
                            <label v-if="slot.row.PayMethod==1">现金</label>
                            <label v-if="slot.row.PayMethod==2">转账</label>
                            <label v-if="slot.row.PayMethod==4">微信</label>
                            <label v-if="slot.row.PayMethod==8">支付宝</label>
                            <label v-if="slot.row.PayMethod==16">其它</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Money" label="金额" align="center"></el-table-column>
                    <el-table-column prop="IsInvoice" label="是否有发票" align="center">
                        <template slot-scope="slot">
                            <label v-if="slot.row.IsInvoice==1">是</label>
                            <label v-else>否</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Purpose" label="摘要" align="center"></el-table-column>
                    <el-table-column prop="PurchaseNumber" label="采购单号" align="center"></el-table-column>
                    <el-table-column prop="Remark" label="备注" align="center"></el-table-column>
                    <el-table-column align="center" label="操作" width="150" prop="WorkRecord">
                        <template slot-scope="scope">
                            <el-button type="success" size="mini" @click="TableExpenseEvent(scope.row)">修改</el-button>
                            <el-button type="danger" size="mini" plain @click="ExpenseDeleteOne_event(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align:center;margin-top:2%">
                    <el-button type="success" @click="ShowAddProjectExpenseDetailPage">新增支出明细</el-button>
                </div>
            </el-tab-pane>
        </el-tabs>

        <!--    AddProjectExpenseDetail    项目支出明细-->
        <el-dialog  :append-to-body='true'
                    :visible.sync="AddProjectExpenseDetail_dialog.show"
                    @close="AddProjectExpenseDetail_diaolgclose"
                    width="90%" height="90%" top="10px" title="项目支出明细">
            <AddProjectExpenseDetail
                    ref="AddProjectExpenseDetailref"
                    :project="AddProjectExpenseDetail_dialog.project"
                    :all-finance-category-one="AllFinanceCategoryOne"
                    :all-project-people="AllProjectPeople"></AddProjectExpenseDetail>
        </el-dialog>

        <el-dialog  :append-to-body='true'
                    :visible.sync="UpdataExpenseDetail_dialog.show"
                    width="90%" height="90%" top="10px" title="修改项目支出明细">
            <UpdataProjectExpenseDetail :project-expense="UpdataExpenseDetail_dialog.data"
                                     :all-finance-category-one="AllFinanceCategoryOne"
                                     :all-project-people="AllProjectPeople"></UpdataProjectExpenseDetail>
        </el-dialog>



        <!--    AddProjectJournal      //添加项目日志-->
        <el-dialog  :append-to-body='true'
                    :visible.sync="AddProjectJournal_dialog.show"
                    @close="AddProjectJournal_diaolgclose"
                    width="90%" height="90%" top="10px" title="添加项目日志">
            <AddProjectJournal  ref="AddProjectJournalref" :project="AddProjectJournal_dialog.project"></AddProjectJournal>
        </el-dialog>

        <!--    UpdataProjectJournal      //修改项目日志-->
        <el-dialog :append-to-body='true'
                   :visible.sync="UpdataProjectJournal_dialog.show"
                   width="90%" height="90%" top="10px" title="修改项目日志">
            <UpdataProjectJournal :project="project" :daylog="UpdataProjectJournal_dialog.data"></UpdataProjectJournal>
        </el-dialog>

    </div>
</template>

<script>
    import AddProjectExpenseDetail from "./AddProjectExpenseDetail";
    import AddProjectJournal from "./AddProjectJournal";
    import UpdataProjectJournal from "./UpdataProjectJournal";
    import UpdataProjectExpenseDetail from "./UpdataProjectExpenseDetail";
    import * as publicjs from "../../../public/Scriput/Public";

    export default {
        name: "ProjectDailyManage",
        components: {
            AddProjectExpenseDetail,
            AddProjectJournal,//添加项目日志
            UpdataProjectJournal,
            UpdataProjectExpenseDetail,
        },
        props: {
            project: {
                type: Object,
                required: true,
            },
        },
        data() {
            return {
                activeName: "first",
                AllFinanceCategoryOne:[],
                AllProjectPeople:[],
                AddProjectJournal_dialog: {   //项目支出明细
                    show: false,
                    project: {},
                },
                AddProjectExpenseDetail_dialog: { //添加项目日志
                    show: false,
                    project: {},
                },
                UpdataProjectJournal_dialog:{
                    show: false,
                    data: {},
                },
                UpdataExpenseDetail_dialog:{
                    show: false,
                    data: {},
                },
                JournaltableData:[],
                ExpensetableData: [],
            }
        },
        watch: {
            project: function (val) {
                this.activeName = "first";
                this.GetAllDailyManageData()
                this.AllFinanceCategoryOne = publicjs.GetAllFinanceCategory(this.$http)
                this.AllProjectPeople = publicjs.GetProjectPeople(this.$http, this.project.Id);
            }
        },
        mounted() {
            let _this = this
            _this.$nextTick(() => {
                _this.GetAllDailyManageData()
                this.AllFinanceCategoryOne = publicjs.GetAllFinanceCategory(this.$http)
                this.AllProjectPeople = publicjs.GetProjectPeople(this.$http, this.project.Id);
            })
        },
        methods: {
            //获取对应人员名字
            GetUserName(id){
                for (let i=0; i<this.AllProjectPeople.length;i++){
                    if (this.AllProjectPeople[i].Id == id){
                        return this.AllProjectPeople[i].UserName
                    }
                }
            },
            //表格数据序列号
            indexMethod(index) {
                return index + 1
            },
            //数据转换
            fmtDate(val){
                if (val!=null&&val!=''){
                    return val.split(' ')[0]
                }else{
                    return ''
                }
            },
            //获取项目准备阶段的数据
            GetAllDailyManageData(){
                this.$http.post('Project1/GetAllDailyManageData',{ id: this.project.Id }).then(res=>{
                    if (res.data!=null){
                        this.InitJournalTable(res.data.projectJournal)
                        this.InitExpensetableDataTable(res.data.projectExpenseDetail)
                        if (this.project.ProjectType == 1){

                        }else{

                        }
                    }
                })
            },

            //region  项目日志记录
            //数据加载
            InitJournalTable(InitData){
                this.JournaltableData = InitData
            },
            //新增支出明细弹框显示
            ShowAddProjectJournalPage() {
                this.AddProjectJournal_dialog.show = true;
                this.AddProjectJournal_dialog.project = this.project;
            },
            //用于子组件添加新增的数据
            ProjectTable(obj,type){
                switch (type) {
                    case 'first':
                        this.JournaltableData.push(obj)
                        break;
                    case 'second':
                        this.ExpensetableData.push(obj)
                        break;
                }
            },
            TableProjectEvent(obj) {
                this.UpdataProjectJournal_dialog.data = obj
                this.UpdataProjectJournal_dialog.show = true
            },
            BatchDeleteOne_event(obj) {
                this.$confirm('你确定要删除吗?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                }).then(()=>{
                    this.$http.post('Project1/DeleteProjectJournal',{ id:obj.Id }).then(res=>{
                        if (res.data.IsSuccess){
                            this.$message.success(res.data.Msg)
                            for (let i=0;i<this.JournaltableData.length;i++){
                                if (this.JournaltableData[i].Id == obj.Id){
                                    this.JournaltableData.splice(i,1)
                                    return
                                }
                            }
                        }else{
                            this.$message.warning(res.data.Msg)
                        }
                    })
                })
            },
            //清空添加关闭后的添加表格
            AddProjectJournal_diaolgclose(){
                this.$refs['AddProjectJournalref'].DialogCloseEvent()
            },
            //endregion


            //region  项目支出明细
            //数据加载
            InitExpensetableDataTable(InitData){
                this.ExpensetableData = InitData
            },
            ShowAddProjectExpenseDetailPage() {
                this.AddProjectExpenseDetail_dialog.show=true
                this.AddProjectExpenseDetail_dialog.project=this.project;
            },
            //支出明细类别
            FinanceCategoryName(id){
                for (let i=0;i<this.AllFinanceCategoryOne.length;i++){
                    if (this.AllFinanceCategoryOne[i].Id == id){
                        return this.AllFinanceCategoryOne[i].CategoryName
                    }
                }
                return ''
            },
            //支出明细编辑弹框
            TableExpenseEvent(obj) {
                this.UpdataExpenseDetail_dialog.data = obj
                this.UpdataExpenseDetail_dialog.show = true
            },
            ExpenseDeleteOne_event(obj) {
                this.$confirm('你确定要删除吗?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                }).then(()=>{
                    this.$http.post('Project1/DeleteProjectExpenseDetail',{ id : obj.Id }).then(res=>{
                        if (res.data.IsSuccess){
                            this.$message.success(res.data.Msg)
                            for (let i=0;i<this.ExpensetableData.length;i++){
                                if (this.ExpensetableData[i].Id == obj.Id){
                                    this.ExpensetableData.splice(i,1)
                                    return
                                }
                            }
                        }else{
                            this.$message.warning(res.data.Msg)
                        }
                    })
                })
            },
            AddProjectExpenseDetail_diaolgclose(){
                this.$refs['AddProjectExpenseDetailref'].DialogCloseEvent()
            }
            //endregion
        },
    }
</script>

<style scoped>
</style>
